<template>
  <div class="wrapper">
    <div class="search">
      <Form layout="inline" :model="formState" @finish="handleFinish">
        <Form.Item label="权限key">
          <Input v-model:value="formState.key" placeholder="权限key" allowClear>
            <template #prefix><PermissionOutlined style="color: rgb(0 0 0 / 25%)" /></template>
          </Input>
        </Form.Item>
        <Form.Item>
          <Button type="primary" html-type="submit" @click="findList"> 搜索 </Button>
        </Form.Item>
        <Form.Item>
          <Button @click="reset"> 重置 </Button>
        </Form.Item>
      </Form>
    </div>
    <div class="tableWrapeer">
      <div class="btnUnion">
        <Button type="primary" @click="addPermission"> 新增权限 </Button>
      </div>
      <Table :columns="columns" :data-source="dataSource" :pagination="false">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'action'">
            <span style="display: none">{{ text }}</span>
            <span>
              <Button size="small" type="primary" @click="editPermission(record.id)">
                <template #icon>
                  <EditOutlined />
                </template>
              </Button>
              &nbsp;&nbsp;
              <Popconfirm
                title="确认删除该权限吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="delPermission(record.id)"
              >
                <Button size="small" type="danger">
                  <template #icon>
                    <DeleteOutlined />
                  </template>
                </Button>
              </Popconfirm>
            </span>
          </template>
        </template>
      </Table>
    </div>
    <!-- 新增编辑抽屉 -->
    <Drawer
      v-model:visible="visible"
      width="40%"
      class="custom-class"
      style="color: red"
      :title="drawTit"
      placement="right"
      @after-visible-change="afterVisibleChange"
    >
      <Form :model="formObj" :rules="rules" ref="formRef">
        <div class="formFlex">
          <Form.Item label="权限key" name="key">
            <Input v-model:value="formObj.key" :disabled="formObj.id" placeholder="权限key">
              <template #prefix><PermissionOutlined style="color: rgb(0 0 0 / 25%)" /></template>
            </Input>
          </Form.Item>
          <Form.Item label="权限名称" name="name">
            <Input v-model:value="formObj.name" placeholder="权限名称">
              <template #prefix><PermissionOutlined style="color: rgb(0 0 0 / 25%)" /></template>
            </Input>
          </Form.Item>
        </div>
        <div class="formFlex">
          <Form.Item label="备注" name="remark">
            <Input v-model:value="formObj.remark" placeholder="备注">
              <template #prefix><PermissionOutlined style="color: rgb(0 0 0 / 25%)" /></template>
            </Input>
          </Form.Item>
        </div>
        <Form.Item :wrapper-col="{ span: 14, offset: 8 }">
          <Button @click="handlerClose"> 取消 </Button>
          <Button @click="btnOk" type="primary" style="margin-left: 20px"> 确认 </Button>
        </Form.Item>
      </Form>
    </Drawer>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { columns } from './permission.data';
  import { permissionsApi } from '/@/api/sys/permission';
  import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { Table, Form, Input, Button, Drawer, message, Popconfirm } from 'ant-design-vue';

  onMounted(() => {
    findList();
  });

  const dataSource = ref([]);
  const drawTit = ref('新建权限');
  const formState = reactive({});
  const formObj = ref({});
  const rules = reactive({
    key: [{ required: true, message: '请输入权限key', trigger: 'blur' }],
    name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  });
  const formRef = ref();

  // 查询
  const findList = async () => {
    const data = await permissionsApi.getPermissionList({ ...formState });
    dataSource.value = data || [];
  };

  // 检索
  const reset = () => {
    formState.key = '';
  };
  // 删除
  const delPermission = async (id: number) => {
    await permissionsApi.deletePermission({ id: id });
    message.success('权限删除成功');
    findList();
  };

  // 弹窗
  //#region
  const visible = ref(false);
  const addPermission = () => {
    drawTit.value = '新建权限';
    visible.value = true;
  };
  const editPermission = async (id) => {
    const data = await permissionsApi.getPermissionDetail({ id });
    formObj.value = {
      ...data,
    };
    drawTit.value = '编辑权限';
    visible.value = true;
  };
  const handlerClose = () => {
    formObj.value = {
      menu: [],
    };
    visible.value = false;
  };
  const btnOk = async () => {
    console.log(formObj.value);
    await formRef.value.validate();
    const submitData = {
      ...formObj.value,
    };
    if (formObj.value.id) {
      // 编辑
      await permissionsApi.updatePermission(submitData);
      message.success('更新权限联成功');
    } else {
      // 新增
      await permissionsApi.createPermission(submitData);
      message.success('创建权限成功');
    }
    handlerClose();
    findList();
  };
  //#endregion
</script>

<style scoped lang="less">
  .wrapper {
    padding: 20px;

    .search {
      margin-bottom: 20px;
      padding: 20px;
      background-color: #fff;
    }

    .tableWrapeer {
      padding: 20px;
      background-color: #fff;

      .btnUnion {
        margin-bottom: 10px;
      }
    }
  }

  .custom-class {
    .formFlex {
      display: flex !important;
    }

    .formFlex > *:last-child {
      margin-left: 20px;
    }
  }
</style>
